<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>


    <link rel="stylesheet" href="style.css">



</head>

<body>

    <header>
        <div class="title">Hello world</div>
        <div class="passages">
            China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred
            liabilities for
            its smart car industry, Economic Information Daily reported Thursday.
        </div>
        <div class="login">
            <div>CREATE YOUR ACCOUNT</div>
            <div>
                <input type="text" placeholder="admin@wust.edu.cn">
                <input type="text" placeholder="input your password">
                <button type="submit">登录</button>
            </div>
        </div>
    </header>

    <section>
        <div class="second">
            <div>BOATLOADS OF AWESOME</div>
            <div>
                Ready-made, customizable, HTML
                <br>landing page sections
            </div>
            <div class="info">
                <div class="phone">
                    <img src="img/iphone.png">
                    <h1>Mobile First</h1>
                    <p>
                        This scenario might have seemed more likely in the universe imagined by Aristotle and Ptolemy.
                    </p>
                </div>
                <div class="check">
                    <img src="img/check.png">
                    <h1>Accessibility</h1>
                    <p>Today they estimate as many as 500 billion billion sunlike stars, with 100 billion billion
                        Earthlike planets.
                    </p>
                </div>
                <div class="pencil">
                    <img src="img/pencil.png" />
                    <h1>Fluid Typography</h1>
                    <p>
                        The more we learn about the universe, the more absurd it would seem if all but one of those
                        bodies were bereft of life.
                    </p>
                </div>
                <div class="setting">
                    <img src="img/settings.png">
                    <h1>Customization</h1>
                    <p>
                        Maybe humanity is still so basic and primitive that advanced civilizations don’t think we’re
                        worth talking to.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="third">
        <div>
            <div class="supportive">
                <h1>Supportive policies for <br> China's smart car</h1>
                <br>
                <p>
                    Fermi wasn’t the first person to ask a variant of this question about alien intelligence. But he
                    owns it. The query is known around the world as the Fermi paradox. It’s typically summarized like
                    this: If the universe is unfathomably large, the probability of intelligent alien life seems almost certain.
                </p>
                <br>
                <br>
                <button>CHECK OUR FEATURES</button>
                <button>TRY PRODUCT FOR FREE</button>
            </div>
            <div class="ipad">
                <img src="img/ipad.png">
            </div>
        </div>
    </section>

    <section se="fourth">
        <div class="crew">
            <div style="color: black;">Our Awesome Crew</div>
            <br>
            <div style="color: black;">
                Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new
                job, brush
                up on your skills.
            </div>

            <div class="crewphoto">
                <div class="img_div">
                    <img class="who" src="img/a1.jpg" />
                    <div class="mask">
                        <h1 style="color: black;">Ethan Dutton</h1>
                        <p style="color: black;">SENIOR VISUAL DESINCER</p>
                        <div>
                            <img src="img/facebook.png">
                        </div>
                    </div>
                </div>
                <div class="img_div">
                    <img class="who" src="img/a2.jpg" />
                    <div class="mask">
                        <h1 style="color: black;">Ethan Dutton</h1>
                        <p style="color: black;">SENIOR VISUAL DESINCER</p>
                        <div>
                            <img src="img/facebook.png">
                        </div>
                    </div>
                </div>
                <div class="img_div">
                    <img class="who" src="img/a3.jpg" />
                    <div class="mask">
                        <h1 style="color: black;">Ethan Dutton</h1>
                        <p style="color: black;">SENIOR VISUAL DESINCER</p>
                        <div>
                            <img src="img/facebook.png">
                        </div>
                    </div>
                </div>
                <div class="img_div">
                    <img class="who" src="img/a4.jpg" />
                    <div class="mask">
                        <h1 style="color: black;">Ethan Dutton</h1>
                        <p style="color: black;">SENIOR VISUAL DESINCER</p>
                        <div>
                            <img src="img/facebook.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


</body>

</html>